<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>电子音乐</title>  
    <style>  

        /*============背景============*/
        html, body {  
            height: 100%;  
            margin: 0;  
            padding: 0;  
        }  
  
        body {  
            background: linear-gradient(to bottom right, #214bd3, #dd45f8, #a200ff);  
            background-size: 400% 400%;  
            animation: gradient 15s ease infinite;  
        }  
  
        @keyframes gradient {  
            0% {  
                background-position: 0% 0%;  
            }  
            50% {  
                background-position: 100% 100%;  
            }  
            100% {  
                background-position: 0% 0%;  
            }  
        }  
        /*============背景============*/
  
        /*=============导航栏=============*/  
        .div1 {  
            width: 20px;  
            height: 100vh; 
            background-color: rgb(67, 67, 67);  
            overflow: hidden;  
            box-shadow: 5px 1px 8px rgba(69, 69, 69, 0.771);  
            position: relative;  
            transition: width 1s ease;  
        }  
  
        .div1:hover {  
            width: 150px;  
        }  
  
        ul {  
            list-style-type: none;  
            padding: 0;  
            margin: 0;  
            padding-bottom: 50px;  
        }  
  
        
        li a {  
            display: block;  
            text-decoration: none;  
            color: rgb(245, 245, 220);  
            text-align: center;  
            padding: 25px;
            padding-top: 40px;  
            transition: font-size 0.8s ease;  
        }  
  
        li a:hover {  
            background-color: rgb(0, 0, 0);  
            box-shadow: 3px 3px 3px;  
            font-size: 22px;  
        }  
  
        .arrow {  
            color: antiquewhite;  
            position: absolute;  
            bottom: 20px;  
            left: 50%;  
            transform: translateX(-50%);  
            pointer-events: none;  
        }  

        button {
            color: rgb(162, 153, 141);
            width: 20%;
            padding: 0.1%;
            margin-left: 19%;
            border: 3px solid rgb(46, 46, 46);
            border-radius: 5em;
            font-size: x-large;
            background-color: rgba(29, 29, 29, 0.407);
        }
        
        button:hover {
            color: antiquewhite;
            box-shadow:3px 3px 3px  #7404a0;
        }

        /*=============导航栏=============*/  

        /*=============内容栏=============*/

        .flex-container {
            display: flex;
            width: 91%;
            height: 100%;
            left: 5%;
            background-color: rgba(240, 248, 255, 0.23);
            position: absolute;
            flex-wrap: wrap;
        }

        .flex-item1 {
            width: 26%;
            height: 29%;
            margin: 1%;
            padding: 0.8%;
            border-radius: 5%;
            overflow: hidden;
            background-color: rgba(250, 235, 215, 0.266);
        }

        .flex-item2 {
            width: 65%;
            height: 5%;
            margin: 1%;
            padding: 0.8%;
            border-radius: 5em;
            background-color: rgba(29, 29, 29, 0.558);
        }

        .flex-item3 {
            width: 26%;
            height: 58%;
            margin: 1%;
            padding: 0.8%;
            border-radius: 5%;
            background-color: rgba(250, 235, 215, 0.005);
        }

        .content-box {
            position: absolute;
            left: 29.6%;
            top: 11%;
            width: 61.6%;
            height: 76.5%;
            margin: 1%;
            padding: 3%;
            border-radius: 5%;
            overflow: auto;
            background-color: rgba(250, 235, 215, 0.558);
        }

        .content-box p {  
            text-indent: 2em;  
            font-size: large;
        }

        .option1 {
            display: flex;
            width: 320px;
            height: 60px;
            margin: 5px;
            margin-bottom: 25px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
            text-align: center;
        }

        .option2 {
            width: 320px;
            height: 60px;
            margin: 5px;
            margin-bottom: 25px;
            margin-left: 40px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
        }

        .option3 {
            width: 320px;
            height: 60px;
            margin: 5px;
            margin-bottom: 25px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
        }

        .option4 {
            width: 320px;
            height: 60px;
            margin: 5px;
            margin-bottom: 25px;
            margin-left: 40px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
        }

        .option5 {
            width: 320px;
            height: 60px;
            margin: 5px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
        }

        .option1,  
        .option2,  
        .option3,  
        .option4,  
        .option5 {  
            transition: transform 0.3s ease;  
        } 

        .option1:hover,
        .option3:hover,
        .option5:hover {
            transform: rotate(-5deg) scale(1.2);
        }

        .option2:hover,
        .option4:hover {
            transform: rotate(7deg) scale(1.2);
        }

        img {
            width: 310px;
            height: 54px;   
            padding-top: 3px;
            padding-left: 4px;
            text-align: center;
            border-radius: 5em;
        }
        
        .word {
            position: absolute;
            top: -1%;
            left: -1%;
            width: 450px;
            height: 320px;
        }
        /*=============内容栏=============*/

        /*------------ 浮 动 -------------*/ 

        @media screen and (max-width:600px) {
            html {
                overflow: auto;
            }

            .word {
                width: 100%;
                height: 300px;
                top: -50%;
            }

            .flex-item2 {
                width: 91%;
            }

            .flex-container {
                width: 100%;
            }

            .flex-item1 {
                position: absolute;
                top:7%;
                width: 28%;
                height: 22%;
                
            }

            .flex-item3 {
                position:absolute;
                top: -14.5%;
                left: 31%;
                transform: rotate(90deg);
            }

            .content-box {
                position: absolute;
                top: 31%;
                left: 0.5%;
                width: 86%;
                height: 60%;
            }

            .option1,
            .option2,
            .option3,
            .option4,
            .option5 {
                width: 100%;
                height: 6%;
            }

            img {
                width: 90%;
                height: 70%;
            }
        }

        /*------------ 浮 动 -------------*/ 
    </style> 
</head>  
<body>  
    <div class="flex-container">
        <div class="flex-item1"><img class="word" src="./图片/Tran/transe word.png"></div>
        <div class="flex-item2">
            <button onclick="showContent('content1')">初期</button>  
            <button onclick="showContent('content2')">发展</button>
        </div>

        <div class="flex-item3">
            <div class="option1"><a href="https://www.kugou.com/mixsong/gyf8a4d.html?fromsearch=Children"><img src="./图片/Tran/Tran1.png"></a></div>
            <div class="option2"><a href="https://www.kugou.com/mixsong/3wjxzm30.html"><img src="./图片/Tran/Tran2.png"></a></div>
            <div class="option3"><a href="https://www.kugou.com/mixsong/htredff.html"><img src="./图片/Tran/Tran3.png"></a></div>
            <div class="option4"><a href="https://www.kugou.com/mixsong/7narmz15.html"><img src="./图片/Tran/Tran4.png"></a></div>
            <div class="option5"><a href="https://www.kugou.com/mixsong/54qa068b.html"><img src="./图片/Tran/Tran5.png"></a></div>
        </div>

        <div class="content-box" id="contentBox">
        </div>
    </div>

    <div class="div1">  
        <ul>  
            <li><a href="./Dubstep.html">Dubstep</a></li>  
            <li><a href="./Trance.html">Trance</a></li>  
            <li><a href="./Synwave.html">Synthwave</a></li>  
            <li><a href="./Hardcore.html">Hardcore</a></li>  
        </ul>  
        <p class="arrow">⇲</p>   
    </div>  
    
    <script>  
        var content1 = '<p>Trance（也称为Trance Music或出神音乐）起源于20世纪90年代初期的德国，它是一种电子舞曲（Electronic Dance Music）类型，深受当时电子音乐和舞曲文化的影响。Trance舞曲是90年代早期从德国高科技舞曲和硬核音乐中分离出来的，它强调简洁的合成器乐句在全曲中的不断反复，只有很少的一些节奏上的变化和偶尔的合成器的干扰可以将这些反复区分开来——这样做的目的是为了有效地将听众带入一种接近宗教本源的“出神”状态。</p><p>Trance音乐的形成受到了Acid House和Techno两种音乐风格的深刻影响。Acid House以其独特的酸性音色和重复的节奏为特点，而Techno则以其机械化的节奏和极简的编曲风格著称。这两种音乐风格都为Trance音乐提供了重要的音乐元素和创作灵感。</p><p>在20世纪90年代初期的德国，一些音乐制作人开始尝试将这两种音乐风格融合在一起，创造出一种全新的电子舞曲类型。他们通过对低音线的强调、对节奏的掌控以及对音效的巧妙运用，营造出一种独特的音乐氛围，使听众能够沉浸其中，感受到一种超越现实的音乐体验。</p><p>随着时间的推移，Trance音乐逐渐发展成为一种独特的音乐流派，并开始在全球范围内流行。它的音乐特点包括快速而富有节奏感的旋律、机械化的鼓点以及渐进式的编曲等。同时，Trance音乐还非常注重氛围的营造和情感的表达，使听众能够在音乐中感受到一种强烈的情感共鸣和心灵震撼。</p>';  
        var content2 = '<p>在90年代早期，Trance音乐主要以一种简洁的合成器乐句在全曲中不断反复的形式出现，这种重复的节奏和旋律可以有效地将听众带入一种接近宗教本源的“出神”状态。</p><p>90年代中期，尽管人们对Trance音乐的兴趣有所减退，但它在一些地区仍然保持着一定的影响力。而到了90年代后期，Trance音乐再次受到欢迎，并逐渐在全球范围内取得了更高的关注度。</p><p>进入90年代末期，英国的DJ们如Sasha、John Digweed和Paul Oakenfold将Trance带到了英国，使英国成为现场演出的中心。同时，Trance音乐也在纽约和伊比萨岛的夜店受到欢迎。</p><p>在21世纪初，Trance音乐继续发展壮大。荷兰的Ferry Corsten、Tiesto和Armin van Buuren成为了全球范围内的Trance巨星，他们领导的Armada Music和Black Hole Recordings等厂牌推出了多个子标签，以满足不同风格的Trance音乐需求。这个时期，Uplifting Trance、Euro-Trance、Vocal Trance等风格也逐渐崛起，为Trance音乐注入了新的活力。</p><p>在2000年代，Trance音乐开始融入Electro House等风格，这为Trance音乐的发展带来了新的元素。</p><p>目前，Trance音乐已成为一种广受欢迎的电子舞曲类型，它在全球范围内都有着大量的粉丝和追随者。同时，随着电子音乐技术的不断发展和创新，Trance音乐也在不断地演变和进步，呈现出更加多样化和个性化的特点。</p>';  
      
        window.onload = function() {  
          showContent('content1');   
        };  
      
        function showContent(contentId) {  
          var contentBox = document.getElementById('contentBox');  
          switch (contentId) {  
            case 'content1':  
              contentBox.innerHTML = content1;  
              break;  
            case 'content2':  
              contentBox.innerHTML = content2;  
              break;  
          }  
        }  
      </script> 
</body>  
</html>